<template>
  <div class="user-container">
    <Header title='个人中心' :titleDes='crumb'></Header>
    <div class="body">
      <Row :gutter="30">
        <Col span="6">
        <Left @bindSelect="bindSelect"></Left>
        </Col>
        <Col span="18">
        <AccountInfo v-model="showaccount"></AccountInfo>
        <ScurityInfo @bindSelect="bindSelect" v-model="showsecurity"></ScurityInfo>
        <InstitudeValidate v-model="showInstitudeValidate"></InstitudeValidate>
        <LevelValidate v-model="showLevelValidate"></LevelValidate>
        <PasswordReset @bindSelect="bindSelect" v-model="showPasswordReset"></PasswordReset>
        <BandingPhone @bindSelect="bindSelect" v-model="showBandingPhone"></BandingPhone>
        <BandingEmail @bindSelect="bindSelect" v-model="showBandingEmail"></BandingEmail>
        </Col>
      </Row>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from '../components/Header'
import Footer from '../components/Footer'
import Left from '../components/Left'
import AccountInfo from '../components/AccountInfo'
import ScurityInfo from '../components/ScurityInfo'
import InstitudeValidate from '../components/InstitudeValidate'
import LevelValidate from '../components/LevelValidate'
import PasswordReset from '../components/PasswordReset'
import BandingPhone from '../components/BandingPhone'
import BandingEmail from '../components/BandingEmail'
import { Component, Vue, Watch } from 'vue-property-decorator'
import ajax from '../lib/ajax'

@Component({
  components: {
    Header,
    Footer,
    Left,
    AccountInfo,
    ScurityInfo,
    InstitudeValidate,
    LevelValidate,
    PasswordReset,
    BandingPhone,
    BandingEmail
  }
})
export default class User extends Vue {
  crumb = [{ title: 'Personal Center', link: '' }]
  showaccount = true
  showsecurity = false
  showInstitudeValidate = false
  showLevelValidate = false
  showPasswordReset = false
  showBandingPhone = false
  showBandingEmail = false
  bindSelect(key) {
    this.showaccount = key === '1'
    this.showsecurity = key === '2'
    this.showInstitudeValidate = key === '3'
    this.showLevelValidate = key === '4'
    this.showPasswordReset = key === '5'
    this.showBandingPhone = key === '6'
    this.showBandingEmail = key === '7'
  }

  @Watch('$route')
  onChildChanged(newVal, oldVal) {
    if (oldVal.path === '/User') {
    } else if (newVal.path === '/User') {
      console.log('%c%s', 'color:blue', 'usercenter oldVal.path' + oldVal.path)
      console.log('%c%s', 'color:blue', 'usercenter newVal.path' + newVal.path)
      this.fetchData()
    }
  }

  fetchData() {
    console.log('%c%s', 'color:red', 'usercenter fetchData')
    ajax.post('authorState').then(result => {
      if (result.data.code === 200) {
        this.$store.commit('session/setAuthorStates', result.data.data)
        ajax.post('evaluatorState').then(result => {
          if (result.data.code === 200) {
            this.$store.commit('session/setEvaluatorStates', result.data.data)
            const query = this.$route.query
            if (query && query.id) {
              this.bindSelect(query.id)
            } else {
              this.bindSelect('1')
            }
          }
        })
      }
    })
  }

  created() {
    console.log('%c%s', 'color:red', 'usercenter created')
    this.fetchData()
  }
}

</script>
<style scoped>
.body {
  text-align: left;
  padding: 1rem 10% 4rem 20%;
}
</style>
